<template>
    <div>
        <Tabs value="name1" type="card">
            <TabPane label="新闻分类" name="name1">
                <Button type="info" @click="Alert()">添加根节点</Button>
                <Tree :data="data5" :render="renderContent"></Tree>
            </TabPane>
            <TabPane label="上传分类" name="name2">
                <Button type="info" @click="Alert()">添加根节点</Button>
                <Tree :data="data6" :render="renderContent"></Tree>
            </TabPane>
            <TabPane label="产品分类" name="name3">
                <Button type="info" @click="Alert()">添加根节点</Button>
                <Tree :data="data7" :render="renderContent"></Tree>
            </TabPane>
        </Tabs>
        <Modal
                v-model="modal"
                title="添加节点">
            <Form :model="formTop" label-position="top">
                <FormItem label="parentId">
                    <Input v-model="formTop.input1"></Input>
                </FormItem>
                <FormItem label="节点名">
                    <Input v-model="formTop.input2"></Input>
                </FormItem>
                <FormItem label="type类型">
                    <Input v-model="formTop.input3"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary"
                            @click="titleVal()">提交</Button>
                    <Button type="ghost"
                            @click="clearForm()"
                            style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal
                v-model="modal1"
                title="添加根节点">
            <Form :model="formTop" label-position="top">
                <FormItem label="节点名">
                    <Input v-model="formTop.input2"></Input>
                </FormItem>
                <FormItem label="type类型">
                    <Input v-model="formTop.input3"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary"
                            @click="Add()">提交</Button>
                    <Button type="ghost"
                            @click="clearForm()"
                            style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal
                v-model="modal2"
                title="修改节点">
            <Form :model="formTop" label-position="top">
                <FormItem label="parentId">
                    <Input v-model="formTop.input1"></Input>
                </FormItem>
                <FormItem label="Edit">
                    <Input v-model="formTop.input2"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary"
                            @click="Edit()">修改</Button>
                    <Button type="ghost"
                            @click="clearForm()"
                            style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                modal:false,
                modal1:false,
                modal2:false,
                formTop: {
                    input1: '',
                    input2:'',
                    input3:''
                },
                formItem:{
                  parentId:'',
                  title:'',
                  type:''
                },
                data5: [],
                data6: [],
                data7: [],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        methods: {
            getData(){
                this.$http.get('http://localhost:3000/cate/list/1')
                    .then(res=>{
                        this.data5 = res.data;
                    })
            },
            getData1(){
                this.$http.get('http://localhost:3000/cate/list/2')
                    .then(res=>{
                        this.data6 = res.data;
                    })
            },
            getData2(){
                this.$http.get('http://localhost:3000/cate/list/3')
                    .then(res=>{
                        this.data7 = res.data;
                    })
            },
            Alert(){
                this.modal1 = true;
                this.formTop.input2 = '';
                this.formTop.input3 = '';
            },
            Add(){
              var newData = {title:this.formTop.input2,type:this.formTop.input3};
              console.log(newData);
              this.$http.post('http://localhost:3000/cate/data/',newData)
                  .then(res=>{
                      this.modal1=false;
                      this.$Message.success('添加成功！');
                      this.getData();
                      this.getData1();
                      this.getData2();

                  })
            },
            titleVal(){
                var newDate = {parentId:this.formTop.input1,title:this.formTop.input2,type:this.formTop.input3};
                this.$http.post('http://localhost:3000/cate/data/',newDate)
                    .then(res=>{
                        this.modal=false;
                        this.$Message.success('添加成功！');
                        this.getData();
                        this.getData1();
                        this.getData2();
                    });
            },
            Edit(){
                var newDate = {title:this.formTop.input2}
                this.$http.put('http://localhost:3000/cate/data/'+this.formTop.input1,newDate)
                    .then(res=>{
                        this.$Message.success('修改成功!');
                        this.modal2 = false;
                        this.getData();
                        this.getData1();
                        this.getData2();
                    })
            },
            clearForm(){
                this.formTop.input2 = '';
                this.formTop.input3 = '';
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)//title变为title,数据库中的字段为title
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'plus'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.modal=true;
                                    this.formTop.input1 = node.node._id;
                                    this.formTop.input2 = '';
                                    this.formTop.input3 = '';
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'minus'
                            }),
                            on: {
                                click: () => {
                                    this.$Modal.confirm({
                                        title: '确认删除数据',
                                        content: '<p>确认删除该记录吗？</p>',
                                        onOk: () => {
                                            var deleteId = node.node._id;
                                            this.$http.delete('http://localhost:3000/cate/data/' + deleteId)
                                                .then(res=>{
                                                    this.$Message.info('删除数据成功');
                                                    this.getData();
                                                    this.getData1();
                                                    this.getData2();
                                                })
                                        },
                                        onCancel: () => {
                                        }
                                    });
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'edit'
                            }),
                            style: {
                                marginLeft: '8px'
                            },
                            on: {
                                click: () => {
                                    this.modal2=true;
                                    this.formTop.input1 = node.node._id;
                                    this.formTop.input2 = node.node.title;
                                }
                            }
                        }),
                    ])
                ]);
            },
        },
        created(){
            this.getData();
            this.getData1();
            this.getData2();
        }
    }
</script>
